<template>
	<div class="app-container">
		<el-button style="margin-bottom: 10px" type="primary" @click="getList">刷新</el-button>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="id" label="申请ID" align="center" />
			<el-table-column prop="nickName" label="用户昵称" align="center" />
			<el-table-column prop="phone" label="手机号" align="center" />
			<el-table-column prop="wxAccount" label="微信账号" align="center" />
			<el-table-column prop="currentBalance" label="当前余额" align="center"> </el-table-column>
			<el-table-column prop="successfulBalance" label="提现成功后余额" align="center"> </el-table-column>
			<el-table-column prop="amount" label="申请提现金额" align="center"> </el-table-column>
			<el-table-column prop="payCode" label="收款码" align="center">
				<template v-slot="{ row }">
					<el-link type="primary" @click="handleViewPayCode(row)">查看</el-link>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template v-slot="{ row }">
					<el-link type="primary" v-if="row.state == 0" @click="handleChangeState(row)">变更打款状态</el-link>
					<div v-else style="color: #aaa; font-size: 12px; margin-top: 4px">成功打款</div>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="申请时间" align="center" />
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<el-dialog :visible.sync="payCodeDialogVisible" title="收款码二维码" @close="payCodeImg = ''">
			<div style="text-align: center">
				<img v-if="payCodeImg" :src="payCodeImg" alt="收款码二维码" style="width: 500px" />
				<div v-else style="color: #aaa">二维码生成中...</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import QRCode from 'qrcode';
import { getWithdrawList, approveWithdraw } from '@/api/system/money';

export default {
	name: 'Money',
	data() {
		return {
			tableData: [],
			payCodeDialogVisible: false,
			payCodeImg: '',
			queryParams: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			approvalObj: null,
			rejectReason: ''
		};
	},
	created() {
		this.getList();
	},
	methods: {
		handleChangeState(row) {
			this.$confirm('确定变更打款状态吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const params = {
					id: row.id,
					state: 1, // 1 表示通过
					remarks: '审批通过' // 如果需要备注，可以添加
				};
				await approveWithdraw(params);
				this.resetApprovalForm();
				this.getList(); // 刷新列表
			});
		},
		async handleViewPayCode(row) {
			this.payCodeImg = '';
			this.payCodeDialogVisible = true;
			this.payCodeImg = row.paymentCode;
		},
		getList() {
			getWithdrawList(this.queryParams).then(res => {
				this.tableData = res.rows;
				this.total = res.total;
			});
		},
		resetApprovalForm() {
			this.rejectReason = '';
			this.approvalObj = null;
		},
		async handleApprove() {
			// 审批通过逻辑
			if (!this.approvalObj) return;
			// 假设审批接口需要 id 和状态 (1表示通过)
		},
		async handleReject() {
			// 驳回逻辑
			if (!this.rejectReason) {
				this.$message.warning('请输入驳回原因');
				return;
			}
			// 假设审批接口需要 id, 状态 (2表示驳回) 和驳回原因
			const params = {
				id: this.approvalObj.id,
				state: 2, // 2 表示驳回
				remark: this.rejectReason
			};
			await approveWithdraw(params);
			this.resetApprovalForm();
			this.getList(); // 刷新列表
		}
	}
};
</script>

<style scoped>
.app-container {
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e4e7ed;
}
</style>
